@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, i, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, fieldset,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

ol, ul, li {
  list-style: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

a, a:focus, a:active, a:hover,
:focus,
button, button:focus {
  outline: 0;
}

/*
基础样式
1、布局类，弹性布局，以 flex- 开头，浮动布局，应该直接写入对应的类名中，不添国公用的样式；
2、公用类，以 p- 开头，显示、隐藏，隐藏过长字符，清除浮动，web font字体使用 （必须为公共的东西，用不用到都必须保留的的类），
*/
/*
 flex layout.
 supported browsers,IE10+,firefox39+,chrome31+,safari8+,opera32+,all modern browsers.
 弹性布局，只适用于现在浏览器，IE10+ firefox39+,chrome31+,safari8+,opera32以版本，
 IE9-以下浏览器，及移动端页面应该使用 浮动布局
*/
.flex-h,
.flex-h-left {
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -webkit-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -moz-box;
  /* TWEENER - IE 10 */
  display: -ms-flexbox;
  /* NEW - Chrome */
  display: -webkit-flex;
  /* W3C */
  display: flex;
}

.flex-h-right {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end;
}

.flex-h-space {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}

.flex-h-center {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

.flex-h-mid {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

.flex-v,
.flex-v-top {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  justify-content: flex-start;
}

.flex-v-bottom {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end;
}

.flex-v-mid {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

.flex-v-space {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}

.flex-abs-mid {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

.flex-average {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flex-rows {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
}

.p-text-hide {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-text-center {
  text-align: center;
}

.p-text-right {
  text-align: right;
}

.p-box-sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.p-hide {
  display: none !important;
}

.p-show {
  display: block !important;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.p-clear-fix:after {
  content: "";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
  clear: both;
  overflow: hidden;
}

.p-tran {
  transition: .3s all;
}

.p-circle {
  display: block;
  overflow: hidden;
  border-radius: 50%;
}

.p-gray {
  -webkit-filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter: grayscale(100%);
}

.p-arial {
  font-family: Arial;
}

.p-impact {
  font-family: Impact;
}

/*
web font 的使用，也以公用类的形式来处理，只引用给需要更改字体的项中，
使用方式：先引用字体文件，再设置公用类，最后添加到对应的元素上；
英文字体，可以在  http://www.fontsquirrel.com/tools/webfont-generator 上生成，先行下载到一种字体，然后再将字体文件上传，最后生成下载即可
中文字体，先下载好无版权的 .ttf 格式的字体文件，再通过 font-spider，分析页面，从字体文件中提取出需要的文字，最后再生成各类型的字体文件供使用，

例子
英文字体

//引用字体文件
@font-face {
  font-family: 'oswaldregular';
  src: url('../../font/Oswald/oswald-regular-webfont.eot');
  src: url('../../font/Oswald/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('../../font/Oswald/oswald-regular-webfont.woff2') format('woff2'),
  url('../../font/Oswald/oswald-regular-webfont.woff') format('woff'),
  url('../../font/Oswald/oswald-regular-webfont.ttf') format('truetype'),
  url('../../font/Oswald/oswald-regular-webfont.svg#oswaldregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.p-oswaldregular{
    font-family: oswaldregular;
}

中文字体，使用前要先使用 font-spider处理；

*/
@font-face {
  font-family: 'oswaldlight';
  src: url("/res/font/Oswald/oswald-light-webfont.eot");
  src: url("/res/font/Oswald/oswald-light-webfont.eot?#iefix") format("embedded-opentype"), url("/res/font/Oswald/oswald-light-webfont.woff2") format("woff2"), url("/res/font/Oswald/oswald-light-webfont.woff") format("woff"), url("/res/font/Oswald/oswald-light-webfont.ttf") format("truetype"), url("/res/font/Oswald/oswald-light-webfont.svg#oswaldlight") format("svg");
  font-weight: normal;
  font-style: normal;
}
.p-oswald-light {
  font-family: oswaldlight;
}

@font-face {
  font-family: 'open_sanslight';
  src: url("/res/font/opensans/opensans-light-webfont.eot");
  src: url("/res/font/opensans/opensans-light-webfont.eot?#iefix") format("embedded-opentype"), url("/res/font/opensans/opensans-light-webfont.woff2") format("woff2"), url("/res/font/opensans/opensans-light-webfont.woff") format("woff"), url("/res/font/opensans/opensans-light-webfont.ttf") format("truetype"), url("/res/font/opensans/opensans-light-webfont.svg#open_sanslight") format("svg");
  font-weight: normal;
  font-style: normal;
}
.p-open-sans {
  font-family: open_sanslight;
}

/*
默认的元素，链接样式
*/
body {
  color: #fff;
  font-size: 14px;
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "SimSun";
  background: url("/res/images/bg/single/index-section-bg.png") repeat-y #0d0d0d;
  background-position: 0 174px;
}

h1, h2, h3 {
  font-size: 16px;
}

h4, h5, h6 {
  font-size: 12px;
}

a:link,
a:visited {
  text-decoration: none;
  color: #fff;
}

a:hover {
  color: #d74e36;
}

.container {
  width: 1200px;
  margin: 0 auto;
}

/*旋转360*/
@-webkit-keyframes canvas-rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes canvas-rotate {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes canvas-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 放大图片 */
.hvr-icon-grow {
  position: relative;
}

.hvr-icon-grow img {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-icon-grow:hover img, .hvr-icon-grow:focus img, .hvr-icon-grow:active img {
  -webkit-transform: scale(1.2) translateZ(0);
  transform: scale(1.2) translateZ(0);
}

/*放大边框，并变化边框色*/
.hvr-outline-out:before {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 2px solid #002232;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left,border-color;
  transition-property: top, right, bottom, left,border-color;
}

.hvr-outline-out:hover:before, .hvr-outline-out:focus:before, .hvr-outline-out:active:before {
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
  border-color: #00283a;
}

/*摆动*/
/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
.hvr-buzz-out {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/*
<i class='icons icon-ok'></i>
.icon-ok{
  background-position: sprite-position($icons, login);
}
*/
/*<a href='#' class='icon-ok'>登录</i>
.icon-login::before{
  background-image: sprite-url($icons);
  background-position: sprite-position($icons, login);
}
.icon-reg::before{
  background-image: sprite-url($icons);
  background-position: sprite-position($icons, reg);
}*/
.icons-sprite {
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
  background-repeat: no-repeat;
}

.block-sprite {
  background-image: url('/res/images/bg/block-s8331fd2b59.png');
  background-repeat: no-repeat;
}

.arrow-1:before {
  background-position: 0 -2331px;
}

.arrow-2:before {
  background-position: 0 -2448px;
}

.arrow-3:before {
  background-position: 0 -2475px;
}

.arrow-4:before {
  background-position: 0 -2503px;
}

.arrow-5:before {
  background-position: 0 -2540px;
}

.arrow-7:before {
  background-position: 0 -2573px;
}

.arrow-8:before {
  background-position: 0 -2600px;
}

.arrow-9:before {
  background-position: 0 -2635px;
}

.arrow-10:before {
  background-position: 0 -2359px;
}

.arrow-11:before {
  background-position: 0 -2394px;
}

.arrow-12:before {
  background-position: 0 -2423px;
}

.slick-prev,
.slick-next {
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
}

.p-m-t h2 {
  font-size: 26px;
  color: #f2d5ad;
  font-weight: normal;
  line-height: 28px;
  position: relative;
}

.p-m-t h2:before {
  display: inline-block;
  content: '';
  max-height: 30px;
  min-width: 30px;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
}

.p-text {
  display: inline-block;
  margin-left: 5px;
  min-width: 50px;
}

.more {
  font-size: 14px;
}

.more a:link {
  color: #f2d5ad;
}

.more a:visited {
  color: #f2d5ad;
}

.more a:hover {
  color: #f2d5ad;
}

.p-m-c {
  position: relative;
}

/*en css*/
.en .p-m-t {
  font-family: open_sanslight;
}

/*
  p-tab---public tab
  p-tab-h----public tab header
  p-tab-c----public tab cont
  p-tab-item---public tab item


###example###
        <div class="p-tab player">
            <div class="p-tab-h flex-h-mid">
                <h2 class="flex-h arrow-11">
                    <span class="p-text">一周表现</span>
                </h2>

                <ul class="flex-h" id="playerTab">
                    <li class=""><span class="best">最佳表现选手</span></li>
                    <li class="cur"><span class="worst ">最差表现选手</span> </li>
                </ul>

            </div>
            <div class="p-tab-c">
                <div class="p-tab-item">1</div>
                <div class="p-tab-item p-hide">2</div>
            </div>
        </div>

*/
.p-tab-h {
  position: relative;
  border-bottom: 1px solid #f2d5ad;
}

.p-tab-h ul {
  width: 100%;
}

.p-tab-h li {
  font-size: 20px;
  font-weight: bold;
  color: #a44637;
  min-height: 42px;
  line-height: 42px;
  cursor: pointer;
  background-color: #272727;
}

.p-tab-h li span {
  text-align: center;
  display: block;
  padding: 0 10px;
}

.p-tab-h li.cur {
  background-color: #f2d5ad;
  color: #000;
}

.p-tab-h h2 {
  font-size: 24px;
  color: #f2d5ad;
  font-weight: normal;
  line-height: 28px;
}

.p-tab-h h2:before {
  display: inline-block;
  min-height: 30px;
  min-width: 30px;
  content: '';
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
}

.p-tab-border .p-tab-h {
  border-bottom: none;
}

.p-tab-border .p-tab-h ul:after {
  display: inline-block;
  content: '';
  height: 42px;
  border-bottom: 1px solid #f2d5ad;
  -webkit-box-flex: 2.5;
  -webkit-flex: 2.5;
  -moz-box-flex: 2.5;
  -moz-flex: 2.5;
  -ms-flex: 2.5;
  flex: 2.5;
}

.p-tab-border .p-tab-h li {
  border-bottom: 1px solid #f2d5ad;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #f2d5ad;
  background-color: transparent;
}

.p-tab-border .p-tab-h li span {
  border: 1px solid transparent;
  border-bottom: none;
}

.p-tab-border .p-tab-h li.cur {
  border-bottom: 1px solid transparent;
  background-color: transparent;
  color: #f2d5ad;
}

.p-tab-border .p-tab-h li.cur span {
  border: 1px solid #f2d5ad;
  border-bottom: none;
}

.p-tab-auto .p-tab-h li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/*en css*/
.en .p-tab-h {
  font-family: open_sanslight;
}

.data-li-table {
  width: 100%;
  position: relative;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
}

.data-li-table li {
  min-height: 42px;
  line-height: 1.5em;
  padding: 0 10px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.data-li-table li:hover {
  background: url("/res/images/cont/home/hover.png") repeat;
}

.data-li-table .title-row {
  font-weight: bold;
  min-height: 35px;
  line-height: 35px;
  position: relative;
  z-index: 2;
}

.data-li-table .title-row:hover {
  background-color: transparent;
}

.data-li-table .title-row div {
  line-height: 1.4em;
}

.data-li-table .col {
  margin: 0 5px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

.data-li-table li span {
  margin-right: 5px;
}

.data-li-table li img {
  max-width: 30px;
  max-height: 30px;
  margin-right: 8px;
  overflow: hidden;
}

.fillet-img {
  border-radius: 50%;
  box-shadow: 0 0 5px #111;
}

.row-link {
  min-height: 42px;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

.data-b {
  border-top: 1px solid #652920;
  border-bottom: none;
}

.data-b li {
  border-bottom: 1px solid #2e2e2e;
  border-left: 1px solid #2e2e2e;
  border-right: 1px solid #2e2e2e;
}

.none-b .title-row {
  border-bottom: none;
}

.data-b-bottom li {
  border-bottom: 1px solid #182a3f;
}

.data-b-bottom .title-row {
  border-bottom: 1px solid #182a3f;
}

.data-w-auto .col {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0;
}

.data-w-10 {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 0 10%;
  -moz-flex: 0 0 10%;
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%;
}

.data-w-20 {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 0 20%;
  -moz-flex: 0 0 20%;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.data-w-50 {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 0 50%;
  -moz-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.data-w-80 {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 0 80%;
  -moz-flex: 0 0 80%;
  -ms-flex: 0 0 80%;
  flex: 0 0 80%;
  max-width: 80%;
}

.data-bg li:nth-child(2n-1) {
  background: #3d1616;
}

/* 排序 icon*/
.sortable {
  cursor: pointer;
}

.sortable:after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  width: 9px;
  height: 13px;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
  background-position: 0 -1873px;
}

.asc:after {
  background-position: 0 -1837px;
}

.desc:after {
  background-position: 0 -1855px;
}

.p-select {
  position: relative;
  font-size: 16px;
  cursor: pointer;
}

.p-select h3 {
  max-width: 80%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.p-select img {
  max-height: 30px;
}

.p-select-header {
  line-height: 32px;
  box-sizing: border-box;
  width: 100%;
  border-radius: 5px;
  border: 2px solid #652920;
  background: #130f0e;
  padding: 0 15px;
  position: relative;
  z-index: 10;
  color: #f2d5ad;
  box-shadow: 0 0 2px #000;
}

.p-select-header:hover {
  background: url("/res/images/cont/home/hover.png") repeat;
  /*  box-shadow: 0 0 1px  rgba(255, 255, 255, 0.1),
                         0 0 1px  rgba(83, 169, 255, 0.3),
                         0 0 5px   rgba(255, 255, 255, 0.8);*/
}

.p-select-header:after {
  z-index: 13;
  border: 7px solid transparent;
  width: 0;
  height: 0;
  position: absolute;
  top: 35%;
  right: 4%;
  content: '';
  color: #999;
}

.p-select-header:after {
  background: url("/res/images/bg/icons/select-img.png") no-repeat;
  top: 45%;
}

.p-select-body {
  background: #130f0e;
  border-bottom: 3px solid #3d3838;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  position: absolute;
  z-index: 9;
  top: 40px;
  left: -9999px;
  opacity: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 5px #000;
}

.p-select-body li {
  min-height: 40px;
  line-height: 40px;
  padding: 0 15px;
  box-sizing: border-box;
}

.p-select-body li:hover {
  background: url("/res/images/cont/home/hover.png") repeat;
}

.p-select-body h3 {
  font-weight: normal;
}

.p-select-body-show {
  left: 0;
  opacity: 1;
}

.p-select-no-border .p-select-header {
  border-bottom: none;
}

.p-select-border .p-select-header {
  border: 1px solid #224c72;
}

.p-select-border .p-select-body {
  border: 1px solid #224c72;
}

.p-select-top-radius .p-select-header {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.p-select-icon .p-select-header {
  padding: 0 15px 0 40px;
}

.p-select-icon .p-select-header:before {
  z-index: 13;
  display: block;
  content: '';
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
}

/*
<div class="p-win">
    <div class="p-win-ctrl">
        <a href="javascript:void(0);" class="p-win-close"></a>
        <div class="p-win-mask"><img src="/res/images/loaing.gif"></div>
    </div>


    <div class="p-win-t">
        <h3>p-win-h</h3>
    </div>

    <div class="p-win-c">
       p-win-h
    </div>

    <div class="p-win-b">
        <h3>p-win-b</h3>
    </div>
</div>
*/
.p-page-mask {
  background-color: #000;
  z-index: 8000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  opacity: .9;
}

.p-win {
  width: 700px;
  height: auto;
  min-height: 300px;
  box-sizing: border-box;
  z-index: 9000;
  position: fixed;
  top: 150px;
  left: 50%;
  margin-left: -350px;
  background-color: #140d0c;
  border: 3px solid #652920;
}

.p-win-ctrl {
  position: relative;
}

.p-win-close {
  display: block;
  width: 18px;
  height: 18px;
  position: absolute;
  z-index: 9001;
  top: -3px;
  right: -21px;
  background-color: #652920;
  text-align: center;
}

.p-win-close:after {
  display: inline-block;
  content: '';
  width: 9px;
  height: 9px;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
  background-position: 0 -107px;
  vertical-align: 7%;
}

.p-win-mask {
  display: none;
  min-width: 700px;
  min-height: 2000px;
  position: absolute;
  z-index: 9001;
  top: -3px;
  left: -3px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.p-win-mask img {
  margin-top: 180px;
}

.p-win-t h3 {
  font-size: 18px;
  color: #f2d5ad;
  margin: 10px auto;
}

.p-win-b {
  margin: 30px 0;
}

.user-win {
  background: url("/res/images/bg/single/account-box.png") left top no-repeat #000000;
}

.user-win .p-win-t {
  padding-top: 15px;
  text-align: center;
}

.user-win .p-win-c {
  width: 64%;
  margin: 0 auto;
  padding: 30px 18%;
  background-color: #0a1726;
}

.user-win label {
  margin-left: 90px;
  margin-top: 10px;
}

.user-win label em {
  max-width: 290px;
  font-size: 12px;
}

.user-win .p-form-button {
  margin-top: 20px;
}

.user-win .input-body input {
  padding-right: 30px;
  width: 302px;
  box-sizing: border-box;
  display: block;
}

.user-win .icons-email {
  display: block;
  width: 21px;
  height: 18px;
  position: absolute;
  top: 8px;
  left: 276px;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
  background-position: 0 -272px;
}

.user-win .p-win-b h4 {
  text-align: center;
  font-weight: normal;
  width: 74%;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.6);
  padding-bottom: 8px;
  border-bottom: 1px solid #111921;
}

.user-win .p-win-b a {
  margin: 5px 8px;
  font-size: 12px;
}

.user-win .p-win-b a img {
  margin-right: 3px;
  max-width: 18px;
  max-height: 18px;
}

.user-reg .valid-msg {
  margin-left: 93px;
  width: 300px;
}

.user-reg-pwd .valid-msg {
  margin-left: 135px;
  width: 300px;
}

.user-reg-pwd .input-body {
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -moz-box-flex: 3;
  -moz-flex: 3;
  -ms-flex: 3;
  flex: 3;
}

.user-reg-pwd .p-win-c {
  width: 76%;
  padding: 30px 12%;
}

.user-reg-ok .p-win-c h4 {
  font-size: 26px;
  color: #64dbff;
  text-align: center;
  margin-bottom: 20px;
}

.user-reg-ok .p-win-c p {
  font-size: 14px;
  color: #64dbff;
  text-align: center;
}

.user-login .icons-email {
  top: 11px;
  left: 7px;
  width: 18px;
  height: 12px;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
  background-position: 0 -295px;
}

.user-login .icons-key {
  display: block;
  position: absolute;
  top: 11px;
  left: 7px;
  width: 18px;
  height: 12px;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
  background-position: 0 -942px;
}

.user-login .input-body input {
  padding-left: 30px;
  padding-right: 8px;
  width: 302px;
  box-sizing: border-box;
  display: block;
}

.user-login .p-form-button {
  margin-top: 0;
}

.user-login .row-ctrl {
  margin-top: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.user-login .row-ctrl a:link,
.user-login .row-ctrl a:visited {
  color: rgba(255, 255, 255, 0.7);
}

.user-login label {
  margin-top: 0;
  margin-left: 30px;
}

.user-login .r .input-btn {
  margin: 0 10px;
  width: 89px;
  height: 71px;
  line-height: 71px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border: none;
  background-image: url('/res/images/bg/block-s8331fd2b59.png');
  background-position: 0 -3263px;
}

.user-login .r .input-btn:hover {
  color: #64dbff;
}

.user-login .r .input-btn:disabled {
  background-position: 0 -3187px;
  color: #666;
}

.user-login .p-win-c .l .valid-msg {
  margin-left: 33px;
}

.user-upgrade {
  background: url("/res/images/bg/single/account-box.png") left top no-repeat #000000;
}

.user-upgrade .p-win-t {
  width: 85%;
  margin: 30px auto;
  border-bottom: 1px solid #243f53;
  color: #6ed4ff;
}

.user-upgrade .p-win-t h3 {
  font-size: 24px;
}

.user-upgrade .p-win-c {
  width: 85%;
  color: #6ed4ff;
  font-size: 16px;
  margin: 0 auto;
}

.video-win .p-win-c {
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.video-win iframe {
  margin: 0 auto;
  width: inherit;
  min-height: 400px;
}

.video-win embed {
  margin: 0 auto;
  width: inherit;
  min-height: 400px;
}

.match-detail-video .kda .data-li-table li:hover {
  background-color: transparent;
}

.match-detail-video {
  top: 50px;
  width: 1000px;
  margin-left: -500px;
}

.match-detail-video .t {
  background: url("/res/images/cont/match/matct-dialog-bg.png") no-repeat;
}

.match-detail-video .p-win-t {
  box-sizing: border-box;
  padding: 20px;
}

.match-detail-video h2 {
  line-height: 40px;
  color: #f2d5ad;
  font-size: 24px;
  max-width: 600px;
}

.match-detail-video .title img {
  max-height: 40px;
  max-width: 40px;
  margin-right: 5px;
}

.match-detail-video .score {
  width: 90%;
  margin: 20px  auto 20px auto;
}

.match-detail-video .score img {
  max-width: 120px;
  max-height: 120px;
}

.match-detail-video .score .left a,
.match-detail-video .score .right a {
  width: 145px;
  height: 145px;
  overflow: hidden;
}

/*
.match-detail-video  .score .left a:hover,
.match-detail-video  .score  .right a:hover{
  border: 3px solid #49e5fc;
}
*/
.match-detail-video .money h3 {
  font-weight: normal;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

.match-detail-video .money img {
  width: 35px;
  height: 25px;
}

.match-detail-video .score .left .money {
  margin-right: 20px;
  text-align: center;
}

.match-detail-video .score .right .money {
  margin-left: 20px;
  text-align: center;
}

.match-detail-video .score .left a p {
  font-size: 18px;
}

.match-detail-video .score .right a .p-blue {
  color: #367bd2;
}

.match-detail-video .score .left a .p-blue {
  color: #367bd2;
}

.match-detail-video .score .right a p {
  font-size: 18px;
}

.match-detail-video .numbers li {
  width: 20px;
  text-align: center;
  padding: 3px 0;
  background-color: #f55f45;
  margin: 0 1px;
  position: relative;
  z-index: 9001;
}

.match-detail-video .numbers span {
  display: inline-block;
  color: #000;
  font-size: 24px;
  position: relative;
  z-index: 9100;
}

.match-detail-video .numbers li:before {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 9000;
  width: 20px;
  height: 1px;
  background-color: #111;
}

.match-detail-video .mid {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  min-width: 180px;
}

.match-detail-video .date {
  line-height: 28px;
  font-size: 12px;
  border-radius: 20px;
}

.match-detail-video .mid .date {
  margin: 0 auto 10px auto;
  height: 24px;
  line-height: 26px;
  font-size: 16px;
  color: #fff;
}

.match-detail-video .num {
  font-size: 75px;
  font-weight: bold;
  color: #84dbff;
}

.match-detail-video .bo {
  padding-top: 5px;
  font-size: 12px;
  margin-bottom: 5px;
}

.match-detail-video .p-win-c {
  padding: 0 0px;
}

.match-detail-video .p-win-b {
  margin: 10px 0;
}

.match-detail-video .p-tab-h {
  border: 0px;
}

.match-detail-video .p-tab-h ul {
  width: 70%;
  margin: 0 auto;
}

.match-detail-video .p-tab-h li {
  width: 130px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  color: #f55f45;
  font-weight: normal;
  border-radius: 5px;
  margin: 0px 9px;
  background: #680f00;
}

.match-detail-video .p-tab-h li:hover {
  background-color: #f55f45;
  color: #fff;
}

.match-detail-video .p-tab-h li.cur {
  color: #000;
  background: #f55f45;
}

.match-detail-video .p-tab-item {
  position: relative;
}

.match-detail-video .p-tab-item .time {
  width: 130px;
  color: #fff;
  text-align: center;
  line-height: 28px;
  padding: 2px 15px;
  font-size: 12px;
  border-radius: 10px;
  position: absolute;
  top: -85px;
  left: 50%;
  background: #000000;
  margin-left: -75px;
}

.match-detail-video .first-types {
  border-bottom: 1px solid #40352c;
}

.match-detail-video .first-types li {
  margin: 20px 15px;
  text-align: center;
}

.match-detail-video .first-types .li-types {
  text-align: center;
}

.match-detail-video .first-types h4 {
  color: #f55f45;
  font-size: 14px;
  float: right;
  margin-bottom: 10px;
  height: auto;
  line-height: 50px;
}

.match-detail-video .first-types img {
  max-width: 50px;
  max-height: 50px;
}

.match-detail-video .kda {
  padding-top: 20px;
}

.match-detail-video .kda ul {
  width: 48%;
  border-radius: 2px;
  margin: 10px 2%;
}

.match-detail-video .data-b,
.match-detail-video .data-b li {
  box-sizing: border-box;
  color: #fff;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}

.match-detail-video .data-b .title-row {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.match-detail-video .data-b a {
  color: rgba(255, 255, 255, 0.5);
}

.match-detail-video .data-b a:hover {
  color: #84dbff;
}

.match-detail-video .title-row {
  background-color: #182a40;
  height: 35px;
  font-size: 14px;
  font-weight: normal;
}

.match-detail-video .title-row:hover {
  background-color: #182a40;
}

.match-detail-video .col-1 {
  -webkit-flex: 0 0 80px;
  -moz-flex: 0 0 80px;
  -ms-flex: 0 0 80px;
  flex: 0 0 80px;
}

.match-detail-video .col-1 a {
  width: 80px;
}

.match-detail-video .col-2 {
  -webkit-flex: 0 0 75px;
  -moz-flex: 0 0 75px;
  -ms-flex: 0 0 75px;
  flex: 0 0 75px;
  line-height: 1.5em;
}

.match-detail-video .col-3 {
  -webkit-flex: 0 0 75px;
  -moz-flex: 0 0 75px;
  -ms-flex: 0 0 75px;
  flex: 0 0 75px;
}

.data-a li {
  border-bottom: 1px solid #501f19;
  border-left: 1px solid #501f19;
  border-right: 1px solid #501f19;
}

.match-detail-video .data-a,
.match-detail-video .data-a li {
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.8);
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}

.match-detail-video .data-a .title-row {
  border-bottom-right-radius: 0;
  background: #501f19;
  border-top: 1px solid #501f19;
  border-bottom-left-radius: 0;
}

.match-detail-video .data-a .title-row:hover {
  border-bottom-right-radius: 0;
  background: #501f19;
  border-bottom-left-radius: 0;
}

.match-detail-video .data-a a {
  color: rgba(255, 255, 255, 0.5);
}

.match-detail-video .title-row {
  background-color: #501f19;
  height: 35px;
  font-size: 14px;
  font-weight: normal;
}

.match-detail-video .title-row:hover {
  background-color: #501f19;
}

.match-detail-video .col-1 {
  -webkit-flex: 0 0 80px;
  -moz-flex: 0 0 80px;
  -ms-flex: 0 0 80px;
  flex: 0 0 80px;
}

.match-detail-video .col-1 a {
  width: 80px;
}

.match-detail-video .col-2 {
  -webkit-flex: 0 0 75px;
  -moz-flex: 0 0 75px;
  -ms-flex: 0 0 75px;
  flex: 0 0 75px;
  line-height: 1.5em;
}

.match-detail-video .col-3 {
  -webkit-flex: 0 0 75px;
  -moz-flex: 0 0 75px;
  -ms-flex: 0 0 75px;
  flex: 0 0 75px;
}

.video-play-btn {
  cursor: pointer;
  width: 150px;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  border-radius: 5px;
  background-color: #f55f45;
  font-size: 15px;
  color: #000;
  margin: 0 auto;
  text-align: center;
}

.no-video {
  display: block;
  cursor: pointer;
  width: 120px;
  padding: 0 10px;
  line-height: 30px;
  border-radius: 2px;
  background-color: #575757;
  color: rgba(255, 255, 255, 0.5);
  margin: 10px auto;
  text-align: center;
}

.upload-head-pic {
  width: 560px;
  margin-left: -280px;
}

.upload-head-pic .p-win-t {
  padding: 10px 30px;
}

.upload-head-pic .p-win-t h3 {
  font-size: 18px;
  color: #f2d5ad;
  padding-bottom: 10px;
  border-bottom: 1px solid #243f53;
}

.upload-head-pic .p-win-c {
  padding: 0 30px 30px 30px;
}

.upload-head-pic .p-win-c label {
  display: inline-block;
  padding: 6px 15px;
  background-color: #142645;
}

.upload-head-pic .p-win-c label input {
  display: none;
}

.upload-head-pic .p-win-c p {
  text-align: center;
  line-height: 1.8em;
  font-size: 12px;
  margin-bottom: 5px;
}

.upload-head-pic .upload-box {
  width: 100%;
  min-height: 320px;
  max-height: 450px;
  margin-bottom: 20px;
  border: 1px solid #243f53;
}

.upload-head-pic .upload-box img {
  max-width: 630px;
  max-height: 450px;
}

/*en css*/
.en .user-login .p-win-c .l .valid-msg {
  margin-left: 69px;
}

.en .user-win .p-win-c {
  width: 68%;
  padding: 30px 16%;
}

.en .user-reg label {
  margin-left: 95px;
}

.en .user-reg .valid-msg {
  margin-left: 98px;
}

.en .user-reg-pwd .valid-msg {
  margin-left: 129px;
}

.en .user-reg-pwd .p-win-c {
  width: 72%;
  padding: 30px 14%;
}

.en .user-login label {
  margin-left: 65px;
}

.share .l {
  border-right: 1px solid #0b3f5b;
  position: relative;
  padding-right: 59px;
}

.share .l .lower {
  width: 125px;
  line-height: 25px;
  position: absolute;
  top: 169px;
  text-align: center;
  left: 32px;
  letter-spacing: -1px;
}

.share .r {
  padding-left: 59px;
  float: right;
}

.share .r img {
  margin: 5px;
}

.share .r .input-btn {
  width: 212px;
  height: 32px;
  background: #1e66b7;
  font-weight: normal;
  margin: 10px  0px;
  font-size: 14px;
}

.share .p-win-c {
  width: 80%;
  margin: 0 auto;
  padding: 30px 10%;
  background-color: #0a1726;
}

.disable {
  height: 55px;
  line-height: 55px;
  width: 100%;
}

.disable ul {
  width: 46%;
}

.disable-lef {
  margin: 0% 2%;
}

.dimg img {
  width: 50px;
  height: 50px;
  margin: 0px 5px;
  border: 2px  solid #4f4d4d;
  border-radius: 5px;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.disable .disable-lef .a-head img {
  width: 18px;
  height: 19px;
}

.disable .disable-lef .space {
  margin: 0px 10px;
  color: #d61010;
}

.disable .disable-lef .b-space {
  margin: 0px 10px;
  color: #2e86e9;
}

.disable .disable-lef .b-space img {
  margin-right: 8px;
  margin-top: 5px;
}

.disable .disable-lef .space img {
  margin-right: 8px;
  margin-top: 5px;
}

.scanning {
  width: 380px;
  margin-left: -180px;
}

.scanning img {
  width: 200px;
  height: 200px;
  margin: 20px 90px;
}

.scanning .scanning-type {
  width: 80%;
  margin-left: 10%;
  text-align: center;
  line-height: 50px;
  color: #5dccee;
  border-top: 1px solid #333333;
}

button, input {
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "SimSun";
}

input {
  border: 1px solid;
  box-sizing: border-box;
  padding: 6px 8px  7px 8px;
  color: #fff;
  border-color: #652920;
  background-color: #1e0905;
  font-size: 14px;
}

.input-btn {
  min-width: 82px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  background: #d74e36;
  border: none;
  color: #000;
  font-size: 14px;
  padding: 0;
}

.input-btn:hover {
  background: #f55f45;
  color: #000;
}

.input-btn:disabled {
  background: #666;
  color: #999;
}

.p-form-row {
  margin-bottom: 5px;
}

.p-form-row em {
  font-style: normal;
}

.input-title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: right;
  margin-right: 5px;
}

.input-body {
  -webkit-box-flex: 4;
  -webkit-flex: 4;
  -moz-box-flex: 4;
  -moz-flex: 4;
  -ms-flex: 4;
  flex: 4;
  position: relative;
}

.p-form-button {
  text-align: center;
}

.p-form-button input,
.p-form-button button {
  display: inline-block;
  margin: 0 5px;
}

.valid-msg {
  border: 1px solid #0a2c4a;
  border-radius: 2px;
  font-size: 12px;
  color: #fe1c1c;
  padding: 8px 0;
  margin: 5px auto;
}

.valid-msg:before {
  content: '';
  display: block;
  min-width: 12px;
  height: 12px;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
  background-position: 0 -2756px;
  margin: 3px 5px;
}

.valid-msg div {
  padding-right: 10px;
  box-sizing: border-box;
}

.valid-msg div p {
  margin-bottom: 5px;
}

.input-select {
  border: 1px solid;
  box-sizing: border-box;
  padding: 5px 4px  6px 4px;
  color: rgba(255, 255, 255, 0.7);
  border-color: #09374f;
  background-color: #0a1119;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  min-width: 125px;
}

.input-select option {
  border-color: #09374f;
}

.input-text {
  min-width: 200px;
}

.color-light-green {
  color: #00ff00 !important;
}

.color-dark-green {
  color: #00B600 !important;
}

.color-dark-red {
  color: #CA0000 !important;
}

.color-dark-yellow {
  color: #BBB200 !important;
}

.color-dark-Blue {
  color: #6ee5ff !important;
}

.color-location-NA {
  background-color: #17a9e1 !important;
}

.color-location-EU {
  background-color: #9808fb !important;
}

.color-location-CN {
  background-color: #d70404 !important;
}

.color-location-KR {
  background-color: #169702 !important;
}

.color-location-TW {
  background-color: #c1b813 !important;
}

.color-location-Global {
  background-color: #1430db !important;
}

.p-white {
  color: white;
}

.p-white-dark {
  color: rgba(255, 255, 255, 0.3);
}

.p-blue-light {
  color: rgba(110, 212, 255, 0.5);
}

.p-blue {
  color: #6ed4ff;
}

.p-green {
  color: #449d0f;
}

.p-red {
  color: #fe2d2d;
}

.p-yellow {
  color: #e8e452;
}

.p-indianred {
  color: #f55f45;
}

.p-burlywood {
  color: #f2d5ad;
}

.p-rosybrown {
  color: #a08d74;
}

.p-share h3 {
  font-size: 12px;
  font-weight: normal;
}

.p-share li {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  margin-left: 8px;
}

.p-share li a {
  height: 30px;
}

.p-share li a:hover {
  backface-visibility: visible;
  transform-origin: center center;
  animation: canvas-rotate 0.5s 0s 1 ease normal none;
}

.p-share li a:after {
  display: inline-block;
  content: '';
  width: 20px;
  height: 20px;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
}

.facebook {
  background-color: #4d6ca2;
}

.facebook a:after {
  background-position: 0 -335px;
}

.twitter {
  background-color: #4ac3f0;
}

.twitter a:after {
  background-position: 0 -385px;
}

.weibo {
  background-color: #d22b2a;
}

.weibo a:after {
  background-position: 0 -410px;
}

.qq {
  background-color: #4ac3f0;
}

.qq a:after {
  background-position: 0 -360px;
}

.bar-container {
  position: relative;
  margin: 0 auto;
}

.bar-block {
  background-color: #054899;
  min-width: 100px;
  height: 30px;
  overflow: hidden;
  border-radius: 4px;
}

.bar-item {
  height: 30px;
  background-color: #337084;
  width: 20%;
}

.bar-text-center {
  height: 30px;
  line-height: 30px;
  margin: -30px auto 0 auto;
}

.bar-text-mid {
  height: 30px;
  line-height: 30px;
  margin: -30px auto 0 auto;
}

.bar-text-mid .left {
  width: 20%;
  text-align: center;
}

.bar-text-mid .right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}

.bar-text-space {
  height: 30px;
  line-height: 30px;
  margin: 0 auto 0 auto;
}

.bar-text-space .left {
  width: 50%;
  text-align: left;
}

.bar-text-space .right {
  width: 50%;
  text-align: right;
}

.bread-path {
  margin-top: 20px;
}

.bread-path .container {
  min-height: 40px;
  background-color: #140d0c;
  border-radius: 4px;
  border: 1px solid #512928;
  box-shadow: 0 0 5px #111;
}

.bread-path a,
.bread-path span {
  display: inline-block;
  line-height: 40px;
  min-height: 40px;
  min-width: 60px;
  padding: 0 20px;
  position: relative;
  color: #a09f9f;
}

.bread-path a {
  text-align: center;
}

.bread-path a:link,
.bread-path a:visited {
  color: #f2d5ad;
}

.bread-path a:hover {
  color: #f2d5ad;
}

.bread-path a:before,
.bread-path a:after {
  display: block;
  content: '';
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  border-radius: 2px;
  top: 5px;
}

.bread-path a:before {
  right: 1px;
  border-top: 2px solid #512928;
  border-right: 2px solid #512928;
}

.bread-path a:after {
  right: 0;
}

.status-bar {
  display: inline-block;
  width: 100px;
  padding: 2px 2px;
  border: 1px solid #243f53;
  position: relative;
  line-height: 0;
  font-size: 0;
  border-radius: 2px;
}

.status-bar .bottom {
  display: inline-block;
  max-width: 100px;
  height: 9px;
  background-image: url('/res/images/bg/block-s8331fd2b59.png');
  background-position: 0 -3005px;
}

header {
  line-height: 42px;
  height: 42px;
  font-size: 13px;
  background: url("/res/images/bg/icons/header-bg.png") center repeat;
}

.login {
  margin-right: 15px;
}

.login-btn a {
  display: inline-block;
  border: 2px solid #d74e36;
  border-radius: 16px;
  line-height: 20px;
  padding: 0 13px;
  margin: 4px 4px;
}

.sign-in:before {
  display: inline-block;
  content: '';
  width: 12px;
  height: 15px;
  vertical-align: -15%;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
  background-position: 0 -784px;
}

.reg:before {
  display: inline-block;
  content: '';
  width: 12px;
  height: 15px;
  vertical-align: -15%;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
  background-position: 0 -822px;
}

.sign-in:hover,
.reg:hover {
  border-color: #e15740;
}

.sign-in:hover:before {
  background-position: 0 -764px;
}

.reg:hover:before {
  background-position: 0 -802px;
}

.lang {
  padding: 0 20px;
  background-color: #151515;
}

.lang a {
  display: inline-block;
  line-height: 42px;
  margin: 0 4px;
}

.lang a:hover {
  color: #e15740;
}

.lang .cur {
  color: #e15740;
}

.main-nav {
  background: url("/res/images/bg/block/head-bg.png") center repeat;
  height: 77px;
  border-top: #32302f 1px solid;
}

.main-nav .container {
  position: relative;
}

.main-nav .logo {
  margin-right: 20px;
}

.main-nav .logo a {
  display: block;
  padding: 5px 0 0 0;
}

.main-nav ul {
  width: 100%;
}

.main-nav-item {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  height: 78px;
  text-align: center;
}

.main-nav-item ol {
  position: absolute;
  width: 110px;
  left: -9999px;
  opacity: 0;
  z-index: 8000;
  transition: opacity 0.5s ease;
  background-color: #060b11;
  padding-bottom: 2px;
}

.main-nav-item ol li {
  background-position: 0 -4301px;
}

.main-nav-item ol li:last-child {
  background: none;
}

.sub-link {
  font-size: 12px;
  padding: 6px 5px;
  font-weight: 700;
  line-height: 1.2em;
}

.sub-link:link {
  color: white;
}

.sub-link:visited {
  color: white;
}

.sub-link:hover {
  color: #f55f45;
}

.sub-news .sub-link {
  padding-left: 12px;
}

.sub-match .sub-link {
  padding-left: 12px;
}

.sub-team .sub-link {
  padding-left: 17px;
}

.sub-hero .sub-link {
  padding-left: 14px;
}

.main-nav-item:hover ol {
  left: 12px;
  top: 77px;
  opacity: 1;
}

.main-nav-link {
  height: 78px;
  text-align: center;
  color: white;
}

.main-nav-link:link {
  color: white;
}

.main-nav-link:visited {
  color: white;
}

.main-nav-link:hover {
  color: #f55f45;
}

.cur .main-nav-link {
  background: url(/res/images/bg/single/main-nav-cur-bg.png) top center no-repeat;
}

.cur .main-nav-link:link {
  color: #f55f45;
}

.cur .main-nav-link:visited {
  color: #f55f45;
}

.cur .main-nav-link:hover {
  color: #f55f45;
  background: url(/res/images/bg/single/main-nav-cur-bg.png) top center no-repeat;
}

.hover .main-nav-link:link {
  color: #f55f45;
}

.main-nav-link:before {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
}

/*.nav1:before{ background-position:sprite-position($icons,navs-1); }
.nav2:before{ background-position:sprite-position($icons,navs-2); }
.nav3:before{ background-position:sprite-position($icons,navs-3); }
.nav4:before{ background-position:sprite-position($icons,navs-4); }
.nav5:before{ background-position:sprite-position($icons,navs-5); }
.nav6:before{ background-position:sprite-position($icons,navs-6); }
.nav7:before{ background-position:sprite-position($icons,navs-7); }
.nav8:before{ background-position:sprite-position($icons,navs-8); }
.nav9:before{ background-position:sprite-position($icons,navs-9); }


.cur .nav1:before,.hover .nav1:before{  background-position:sprite-position($icons,nav-1-hover);  }
.cur .nav2:before,.hover .nav2:before{  background-position:sprite-position($icons,nav-2-hover);  }
.cur .nav3:before,.hover .nav3:before{  background-position:sprite-position($icons,nav-3-hover);  }
.cur .nav4:before,.hover .nav4:before{  background-position:sprite-position($icons,nav-4-hover);  }
.cur .nav5:before,.hover .nav5:before{  background-position:sprite-position($icons,nav-5-hover);  }
.cur .nav6:before,.hover .nav6:before{  background-position:sprite-position($icons,nav-6-hover);  }
.cur .nav7:before,.hover .nav7:before{  background-position:sprite-position($icons,nav-7-hover);  }
.cur .nav8:before,.hover .nav8:before{  background-position:sprite-position($icons,nav-8-hover);  }
.cur .nav9:before,.hover .nav9:before{  background-position:sprite-position($icons,nav-9-hover);  }*/
.sub-link:before {
  display: inline-block;
  content: '';
  min-width: 20px;
  height: 20px;
  overflow: hidden;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
}

.news-icon-1:before {
  background-position: 0 -1458px;
}

.news-icon-2:before {
  background-position: 0 -1508px;
}

.news-icon-3:before {
  background-position: 0 -1558px;
}

.news-icon-1:hover:before {
  background-position: 0 -1433px;
}

.news-icon-2:hover:before {
  background-position: 0 -1483px;
}

.news-icon-3:hover:before {
  background-position: 0 -1533px;
}

.match-icon-1:before {
  background-position: 0 -1115px;
}

.match-icon-2:before {
  background-position: 0 -1165px;
}

.match-icon-3:before {
  background-position: 0 -1215px;
}

.match-icon-1:hover:before {
  background-position: 0 -1090px;
}

.match-icon-2:hover:before {
  background-position: 0 -1140px;
}

.match-icon-3:hover:before {
  background-position: 0 -1190px;
}

.team-icon-1:before {
  background-position: 0 -1952px;
  width: 32px;
}

.team-icon-2:before {
  background-position: 0 -2006px;
  width: 32px;
}

.team-icon-1:hover:before {
  background-position: 0 -1926px;
}

.team-icon-2:hover:before {
  background-position: 0 -1978px;
}

.coming-soon {
  position: absolute;
  top: 0;
  right: 10px;
}

.disabled-link a {
  opacity: 0.5;
}

.disabled-link a:hover {
  color: #fff;
  opacity: 0.5;
}

/* 赛区筛选*/
.location-filter {
  width: 100%;
  height: 52px;
  padding-top: 2px;
  background: url("/res/images/bg/single/location-filter.png") center top no-repeat;
  position: relative;
  z-index: 8000;
  box-shadow: 0 1px 8px #000;
}

.location-filter .container {
  height: 52px;
}

.region {
  min-width: 640px;
  margin-right: 5px;
}

.region ul {
  width: 100%;
}

.region h2 {
  font-size: 15px;
  color: #f55f45;
  margin-right: 10px;
  min-width: 70px;
}

.region li {
  height: 30px;
  padding: 0 10px;
  border-radius: 2px;
  color: #bbb;
  cursor: pointer;
  border: 1px solid transparent;
}

.region li:hover {
  color: #f55f45;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0), 0 0 1px rgba(83, 169, 255, 0.8), 0 0 3px 1px rgba(255, 255, 255, 0.6);
}

/*
.en .region li{
  font-family: oswaldlight;
}
*/
.region li img {
  margin-right: 5px;
  margin-top: 2px;
  border-radius: 2px;
}

.region li:first-child img {
  margin-top: 0;
}

.location-filter .cur {
  color: #f55f45;
  background: #170a04;
  border: 1px solid #f55f45;
}

.user-info {
  min-width: 470px;
  color: rgba(255, 255, 255, 0.8);
}

.user-info .logout {
  display: inline-block;
  color: #f55f45;
  margin: 0 10px;
  text-decoration: underline;
}

.user-info .logout:hover {
  color: #f55f45;
}

.user-info .input-btn {
  padding: 0 10px;
}

.fast-reg {
  position: relative;
  min-width: 470px;
}

.fast-reg .fast-reg-input {
  padding: 0 5px 0 50px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #652920;
  width: 320px;
  background-color: #000;
  border-radius: 4px;
}

.fast-reg .input-btn {
  margin-left: 10px;
}

.fast-reg .icons-email {
  border-right: 1px solid #212323;
  width: 38px;
  height: 32px;
  position: absolute;
  top: 10px;
}

.fast-reg .icons-email:before {
  display: inline-block;
  content: '';
  width: 18px;
  height: 18px;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
  background-position: 0 -249px;
}

.fast-reg .valid-msg {
  display: none;
  position: absolute;
  top: 42px;
  left: 96px;
  background: #082331;
  width: 272px;
  padding: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  color: #ff4519;
  font-size: 12px;
  white-space: normal;
  overflow: visible;
  height: auto;
  border: none;
  margin: 0;
}

.fast-reg .valid-msg div {
  line-height: 20px;
  margin-top: -3px;
  padding: 0 5px 5px 0;
}

.fast-reg .valid-msg div p {
  margin-bottom: 5px;
}

.fast-reg .valid-msg::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 0;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
  background-position: 0 -2756px;
  vertical-align: -25%;
  margin: 2px 5px;
}

.reg-loading {
  margin: 0 0 0 10px;
  position: absolute;
  top: 18px;
  right: -30px;
}

footer {
  background-color: #000;
  border-top: 3px solid #772b1d;
  margin-top: 50px;
  color: #ccc;
  padding: 15px 0 5px 0;
}

footer a:link {
  color: #cccccc;
}

footer a:visited {
  color: #cccccc;
}

footer a:hover {
  color: #fff;
  opacity: 0.7;
}

footer h3 {
  min-width: 120px;
  line-height: 58px;
}

.pro-list,
.map,
.partner {
  margin: 15px 0;
}

.pro-list ul {
  width: 400px;
}

.pro-list a {
  height: 58px;
  display: block;
  transition: 0.3s all;
}

.pro-list a:hover,
.partner a:hover {
  box-shadow: 0 0 1px rgba(255, 255, 255, 0), 0 0 5px rgba(83, 169, 255, 0.8), 0 0 10px 2px rgba(255, 255, 255, 0.6);
}

.pro-list a img {
  max-height: 57px;
  max-width: 211px;
}

.partner h3 {
  line-height: 60px;
}

.partner a {
  display: block;
  transition: 0.3s all;
  margin-right: 30px;
  border-radius: 4px;
}

.partner a img {
  max-height: 60px;
  max-width: 60px;
  padding: 5px;
}

.map h3 {
  line-height: 30px;
}

.map a {
  display: block;
  height: 30px;
  padding-right: 22px;
  line-height: 30px;
}

.copy-right {
  font-size: 12px;
  border-top: 1px solid #142c43;
  padding: 22px 0 10px;
}

.copy-right h3 {
  min-width: 40px;
  line-height: 30px;
}

.copy-right .left p {
  margin-bottom: 15px;
}

.copy-right .left a {
  padding-right: 10px;
}

.chat-icon {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  margin-left: 15px;
}

.chat-icon a {
  display: block;
  height: 30px;
}

.chat-icon a:hover {
  backface-visibility: visible;
  transform-origin: center center;
  animation: canvas-rotate 0.5s 0s 1 ease normal none;
}

.chat-icon a i {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: 5px;
}

.facebook {
  background-color: #4d6ca2;
}

.facebook i {
  background-position: 0 -335px;
}

.twitter {
  background-color: #4ac3f0;
}

.twitter i {
  background-position: 0 -385px;
}

.weibo {
  background-color: #d22b2a;
}

.weibo i {
  background-position: 0 -410px;
}

.qq {
  background-color: #4ac3f0;
}

.qq i {
  background-position: 0 -360px;
}

.lolMatrix-zh {
  display: block;
}

.lolMatrix-en {
  display: none;
}

.dotaMatrix-zh {
  display: block;
}

.dotaMatrix-en {
  display: none;
}

.back-top {
  position: absolute;
  right: 0;
  top: 675px;
  width: 164px;
  padding-bottom: 6px;
  background-position: 0 -174px;
  background-color: #000;
  text-align: center;
  z-index: 4001;
  border: 2px solid #652920;
}

.en .back-top {
  font-family: open_sanslight;
}

.back-top-btn {
  height: 74px;
  color: #fff;
}

.back-top-btn a {
  display: block;
  height: 74px;
}

.back-top-btn a:hover {
  opacity: 0.7;
}

.back-top-btn span {
  display: block;
  font-size: 16px;
}

.back-top-btn i {
  font-size: 2.5em;
  display: inline-block;
  height: 12px;
  width: 28px;
  margin-top: 20px;
  background-position: 0 -90px;
}

.back-top-item {
  height: 36px;
  line-height: 36px;
  background-position: 0 -569px;
}

.back-top-item a {
  display: block;
  width: 60%;
  margin: 0 auto;
}

.sign-in-2:before,
.reg-2:before,
.help:before {
  display: inline-block;
  content: '';
  width: 20px;
  height: 20px;
  vertical-align: -18%;
  margin-right: 5px;
  background-image: url('/res/images/bg/icons-s7d1ea49227.png');
}

.sign-in-2:before {
  background-position: 0 -25px;
}

.reg-2:before {
  background-position: 0 -70px;
}

.help:before {
  background-position: 0 -865px;
}

.sign-in-2:hover:before {
  background-position: 0 0;
}

.reg-2:hover:before {
  background-position: 0 -50px;
}

.help:hover:before {
  background-position: 0 -842px;
}

.my-info {
  color: #fff;
}

.my-info li {
  width: 164px;
  overflow: hidden;
}

.my-info .head-img a {
  display: block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  overflow: hidden;
  background: #000;
  border-radius: 5px;
  margin: 10px auto;
}

.my-info .head-img a:hover {
  box-shadow: 0 0 1px rgba(255, 255, 255, 0), 0 0 5px rgba(83, 169, 255, 0.8), 0 0 10px 2px rgba(255, 255, 255, 0.6);
}

.my-info .head-img a img {
  max-width: 80px;
  max-height: 80px;
}

.my-info .logout {
  margin: 0 auto 10px auto;
  color: #a3a3a3;
}

.my-info .logout a {
  font-size: 12px;
  color: #a3a3a3;
}

.my-info .logout a:link {
  color: #a3a3a3;
}

.my-info .logout a:visited {
  color: #a3a3a3;
}

.my-info .logout a:hover {
  color: #a3a3a3;
}

.my-info .btn {
  width: 84px;
  margin: 10px auto;
  height: 26px;
  line-height: 26px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  background: #ebcfa8;
  color: #000;
}

.my-info .btn:hover,
.my-info .btn.hero-tab-hover {
  background-position: 0 -2927px;
}

.my-info .btn:hover {
  background-position: 0 -2927px;
}

.my-info .btn a {
  color: #000;
}

.ajax-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -80px;
  width: 50px;
  height: 50px;
  text-align: center;
  background: #401710;
  border-radius: 5px;
  box-shadow: 0 0 5px #111;
  z-index: 2000;
}

.page-bar {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

/* jqPagination */
.pagination {
  border: 1px solid #ae4a39;
  border-radius: 3px;
}

.pagination a {
  display: block;
  float: left;
  width: 30px;
  height: 30px;
  line-height: 28px;
  outline: none;
  border-right: 1px solid #ae4a39;
  border-left: 1px solid #ae4a39;
  color: #fff;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  font-family: Times, 'Times New Roman', Georgia, Palatino;
  /* ATTN: need a better font stack */
  background-color: #401710;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #401710), color-stop(100%, #401710));
  background-image: -webkit-linear-gradient(#401710, #401710);
  background-image: linear-gradient(#401710, #401710);
}

.pagination a:hover, .pagination a:focus, .pagination a:active {
  background-color: #401710;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #401710), color-stop(100%, #401710));
  background-image: -webkit-linear-gradient(#401710, #401710);
  background-image: linear-gradient(#401710, #401710);
}

.pagination a.disabled, .pagination a.disabled:hover, .pagination a.disabled:focus, .pagination a.disabled:active {
  background-color: #401710;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #401710), color-stop(100%, #401710));
  background-image: -webkit-linear-gradient(#401710, #401710);
  background-image: linear-gradient(#401710, #401710);
  color: #fff;
  cursor: default;
}

.pagination a:first-child {
  border: none;
  border-radius: 2px 0 0 2px;
}

.pagination a:last-child {
  border: none;
  border-radius: 0 2px 2px 0;
}

.pagination input {
  float: left;
  margin: 0;
  padding: 0;
  width: 120px;
  height: 30px;
  outline: none;
  border: none;
  vertical-align: middle;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* gigantic class for demo purposes */
.gigantic.pagination {
  margin: 30px 0;
}

.gigantic.pagination a {
  height: 60px;
  width: 60px;
  font-size: 50px;
  line-height: 50px;
}

.gigantic.pagination input {
  width: 300px;
  height: 60px;
  font-size: 30px;
}
